<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>麦克风SDK基本示例</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      line-height: 1.6;
    }
    
    h1 {
      color: #333;
      border-bottom: 1px solid #eee;
      padding-bottom: 10px;
    }
    
    .container {
      margin-top: 20px;
    }
    
    .section {
      margin-bottom: 30px;
      padding: 15px;
      border: 1px solid #ddd;
      border-radius: 5px;
      background-color: #f9f9f9;
    }
    
    .section h2 {
      margin-top: 0;
      font-size: 1.2em;
      color: #444;
    }
    
    button {
      padding: 8px 16px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      margin-right: 10px;
      margin-bottom: 10px;
    }
    
    button:hover {
      background-color: #45a049;
    }
    
    button:disabled {
      background-color: #cccccc;
      cursor: not-allowed;
    }
    
    button.active {
      background-color: #f44336;
    }
    
    .audio-level {
      height: 20px;
      background-color: #eee;
      border-radius: 3px;
      margin-top: 10px;
      overflow: hidden;
    }
    
    .audio-level-bar {
      height: 100%;
      width: 0%;
      background-color: #4CAF50;
      transition: width 0.1s ease-out;
    }
    
    .status {
      margin-top: 10px;
      padding: 10px;
      background-color: #f5f5f5;
      border-radius: 3px;
    }
    
    .indicator {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin-right: 5px;
      background-color: #ccc;
    }
    
    .indicator.active {
      background-color: #4CAF50;
    }
    
    select, input[type="range"] {
      width: 100%;
      margin-bottom: 10px;
      padding: 5px;
    }
    
    .code-example {
      background-color: #f5f5f5;
      padding: 15px;
      border-radius: 5px;
      overflow-x: auto;
      font-family: monospace;
      margin-top: 10px;
    }
    
    .log-container {
      height: 150px;
      overflow-y: auto;
      background-color: #f5f5f5;
      padding: 10px;
      border-radius: 3px;
      font-family: monospace;
      font-size: 0.9em;
    }
  </style>
</head>
<body>
  <h1>麦克风SDK基本示例</h1>
  
  <div class="container">
    <div class="section">
      <h2>基本控制</h2>
      <div id="basic-controls"></div>
      <div class="code-example">
        <pre>
// 创建麦克风控制面板
import { createMicrophoneControlPanel } from '../ui/components.js';
createMicrophoneControlPanel('basic-controls', {
  title: '麦克风控制',
  showButton: true,
  showMeter: true,
  showSelector: true,
  showGainSlider: true,
  showStatus: true
});
        </pre>
      </div>
    </div>
    
    <div class="section">
      <h2>自定义UI组件</h2>
      <div>
        <div id="custom-button-container"></div>
        <div id="custom-meter-container"></div>
        <div id="custom-selector-container"></div>
        <div id="custom-gain-container"></div>
        <div id="custom-status-container"></div>
      </div>
      <div class="code-example">
        <pre>
// 创建单独的UI组件
import { 
  createMicrophoneButton, 
  createAudioLevelMeter,
  createMicrophoneSelector,
  createGainSlider,
  createStatusIndicator
} from '../ui/components.js';

// 创建麦克风按钮
createMicrophoneButton('custom-button-container', {
  startText: '开始录音',
  stopText: '停止录音'
});

// 创建音频电平指示器
createAudioLevelMeter('custom-meter-container', {
  height: '15px',
  showValue: true
});

// 创建麦克风选择器
createMicrophoneSelector('custom-selector-container', {
  label: '选择麦克风设备:'
});

// 创建增益控制
createGainSlider('custom-gain-container', {
  label: '麦克风增益:',
  min: 0,
  max: 2,
  step: 0.1
});

// 创建状态指示器
createStatusIndicator('custom-status-container');
        </pre>
      </div>
    </div>
    
    <div class="section">
      <h2>直接使用SDK API</h2>
      <div>
        <button id="init-btn">初始化SDK</button>
        <button id="start-btn" disabled>开始录音</button>
        <button id="stop-btn" disabled>停止录音</button>
        <button id="refresh-btn" disabled>刷新设备列表</button>
        
        <div>
          <label for="device-select">麦克风设备:</label>
          <select id="device-select" disabled></select>
        </div>
        
        <div>
          <label for="gain-slider">增益控制:</label>
          <input type="range" id="gain-slider" min="0" max="2" step="0.1" value="1" disabled>
          <span id="gain-value">1.0</span>
        </div>
        
        <div class="audio-level">
          <div id="level-bar" class="audio-level-bar"></div>
        </div>
        
        <div class="status">
          <div>
            <span class="indicator" id="listening-indicator"></span>
            <span id="listening-status">麦克风未启动</span>
          </div>
          <div>
            <span class="indicator" id="permission-indicator"></span>
            <span id="permission-status">权限状态未知</span>
          </div>
        </div>
      </div>
      <div class="log-container" id="log-container"></div>
      <div class="code-example">
        <pre>
// 直接使用SDK API
import MicrophoneSDK from '../MicrophoneSDK.js';

// 初始化SDK
document.getElementById('init-btn').addEventListener('click', async () => {
  await MicrophoneSDK.init();
  log('SDK已初始化');
  
  // 启用按钮
  document.getElementById('start-btn').disabled = false;
  document.getElementById('refresh-btn').disabled = false;
  document.getElementById('device-select').disabled = false;
  document.getElementById('gain-slider').disabled = false;
  
  // 更新设备列表
  updateDeviceList();
  
  // 监听状态变化
  MicrophoneSDK.onMicrophoneStatusChange(updateStatus);
  
  // 监听音频电平变化
  MicrophoneSDK.onAudioLevelChange(level => {
    document.getElementById('level-bar').style.width = `${level * 100}%`;
  });
});

// 开始录音
document.getElementById('start-btn').addEventListener('click', async () => {
  await MicrophoneSDK.startListening();
  log('开始录音');
  
  document.getElementById('start-btn').disabled = true;
  document.getElementById('stop-btn').disabled = false;
});

// 停止录音
document.getElementById('stop-btn').addEventListener('click', async () => {
  await MicrophoneSDK.stopListening();
  log('停止录音');
  
  document.getElementById('start-btn').disabled = false;
  document.getElementById('stop-btn').disabled = true;
});

// 刷新设备列表
document.getElementById('refresh-btn').addEventListener('click', async () => {
  await MicrophoneSDK.refreshMicrophoneList();
  updateDeviceList();
  log('设备列表已刷新');
});

// 设备选择
document.getElementById('device-select').addEventListener('change', async (e) => {
  const deviceId = e.target.value;
  await MicrophoneSDK.selectMicrophone(deviceId);
  log(`已选择麦克风: ${deviceId}`);
});

// 增益控制
document.getElementById('gain-slider').addEventListener('input', (e) => {
  const value = parseFloat(e.target.value);
  MicrophoneSDK.setGain(value);
  document.getElementById('gain-value').textContent = value.toFixed(1);
  log(`增益已设置为: ${value.toFixed(1)}`);
});

// 更新设备列表
function updateDeviceList() {
  const select = document.getElementById('device-select');
  select.innerHTML = '';
  
  const microphones = MicrophoneSDK.getAvailableMicrophones();
  
  if (microphones.length === 0) {
    const option = document.createElement('option');
    option.textContent = '未找到麦克风设备';
    option.disabled = true;
    select.appendChild(option);
    return;
  }
  
  microphones.forEach(mic => {
    const option = document.createElement('option');
    option.value = mic.deviceId;
    option.textContent = mic.label || `麦克风 (${mic.deviceId.substr(0, 5)}...)`;
    select.appendChild(option);
    
    const status = MicrophoneSDK.getMicrophoneStatus();
    if (status.selectedMicrophone && status.selectedMicrophone.deviceId === mic.deviceId) {
      option.selected = true;
    }
  });
}

// 更新状态
function updateStatus(status) {
  // 更新录音状态
  const listeningIndicator = document.getElementById('listening-indicator');
  const listeningStatus = document.getElementById('listening-status');
  
  if (status.isListening) {
    listeningIndicator.classList.add('active');
    listeningStatus.textContent = '麦克风已启动';
  } else {
    listeningIndicator.classList.remove('active');
    listeningStatus.textContent = '麦克风未启动';
  }
  
  // 更新权限状态
  const permissionIndicator = document.getElementById('permission-indicator');
  const permissionStatus = document.getElementById('permission-status');
  
  if (status.hasPermission === true) {
    permissionIndicator.classList.add('active');
    permissionStatus.textContent = '已获得麦克风权限';
  } else if (status.hasPermission === false) {
    permissionIndicator.classList.remove('active');
    permissionStatus.textContent = '麦克风权限被拒绝';
  } else {
    permissionIndicator.classList.remove('active');
    permissionStatus.textContent = '权限状态未知';
  }
}

// 日志函数
function log(message) {
  const logContainer = document.getElementById('log-container');
  const logEntry = document.createElement('div');
  logEntry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
  logContainer.appendChild(logEntry);
  logContainer.scrollTop = logContainer.scrollHeight;
}
        </pre>
      </div>
    </div>
  </div>
  
  <script type="module">
    import MicrophoneSDK from '../MicrophoneSDK.js';
    import { 
      createMicrophoneButton, 
      createAudioLevelMeter,
      createMicrophoneSelector,
      createGainSlider,
      createStatusIndicator,
      createMicrophoneControlPanel
    } from '../ui/components.js';
    
    // 等待DOM加载完成
    document.addEventListener('DOMContentLoaded', () => {
      // 创建麦克风控制面板
      createMicrophoneControlPanel('basic-controls', {
        title: '麦克风控制',
        showButton: true,
        showMeter: true,
        showSelector: true,
        showGainSlider: true,
        showStatus: true
      });
      
      // 创建单独的UI组件
      createMicrophoneButton('custom-button-container', {
        startText: '开始录音',
        stopText: '停止录音'
      });
      
      createAudioLevelMeter('custom-meter-container', {
        height: '15px',
        showValue: true
      });
      
      createMicrophoneSelector('custom-selector-container', {
        label: '选择麦克风设备:'
      });
      
      createGainSlider('custom-gain-container', {
        label: '麦克风增益:',
        min: 0,
        max: 2,
        step: 0.1
      });
      
      createStatusIndicator('custom-status-container');
      
      // 直接使用SDK API
      document.getElementById('init-btn').addEventListener('click', async () => {
        await MicrophoneSDK.init();
        log('SDK已初始化');
        
        // 启用按钮
        document.getElementById('start-btn').disabled = false;
        document.getElementById('refresh-btn').disabled = false;
        document.getElementById('device-select').disabled = false;
        document.getElementById('gain-slider').disabled = false;
        
        // 更新设备列表
        updateDeviceList();
        
        // 监听状态变化
        MicrophoneSDK.onMicrophoneStatusChange(updateStatus);
        
        // 监听音频电平变化
        MicrophoneSDK.onAudioLevelChange(level => {
          document.getElementById('level-bar').style.width = `${level * 100}%`;
        });
      });
      
      // 开始录音
      document.getElementById('start-btn').addEventListener('click', async () => {
        await MicrophoneSDK.startListening();
        log('开始录音');
        
        document.getElementById('start-btn').disabled = true;
        document.getElementById('stop-btn').disabled = false;
      });
      
      // 停止录音
      document.getElementById('stop-btn').addEventListener('click', async () => {
        await MicrophoneSDK.stopListening();
        log('停止录音');
        
        document.getElementById('start-btn').disabled = false;
        document.getElementById('stop-btn').disabled = true;
      });
      
      // 刷新设备列表
      document.getElementById('refresh-btn').addEventListener('click', async () => {
        await MicrophoneSDK.refreshMicrophoneList();
        updateDeviceList();
        log('设备列表已刷新');
      });
      
      // 设备选择
      document.getElementById('device-select').addEventListener('change', async (e) => {
        const deviceId = e.target.value;
        await MicrophoneSDK.selectMicrophone(deviceId);
        log(`已选择麦克风: ${deviceId}`);
      });
      
      // 增益控制
      document.getElementById('gain-slider').addEventListener('input', (e) => {
        const value = parseFloat(e.target.value);
        MicrophoneSDK.setGain(value);
        document.getElementById('gain-value').textContent = value.toFixed(1);
        log(`增益已设置为: ${value.toFixed(1)}`);
      });
    });
    
    // 更新设备列表
    function updateDeviceList() {
      const select = document.getElementById('device-select');
      select.innerHTML = '';
      
      const microphones = MicrophoneSDK.getAvailableMicrophones();
      
      if (microphones.length === 0) {
        const option = document.createElement('option');
        option.textContent = '未找到麦克风设备';
        option.disabled = true;
        select.appendChild(option);
        return;
      }
      
      microphones.forEach(mic => {
        const option = document.createElement('option');
        option.value = mic.deviceId;
        option.textContent = mic.label || `麦克风 (${mic.deviceId.substr(0, 5)}...)`;
        select.appendChild(option);
        
        const status = MicrophoneSDK.getMicrophoneStatus();
        if (status.selectedMicrophone && status.selectedMicrophone.deviceId === mic.deviceId) {
          option.selected = true;
        }
      });
    }
    
    // 更新状态
    function updateStatus(status) {
      // 更新录音状态
      const listeningIndicator = document.getElementById('listening-indicator');
      const listeningStatus = document.getElementById('listening-status');
      
      if (status.isListening) {
        listeningIndicator.classList.add('active');
        listeningStatus.textContent = '麦克风已启动';
      } else {
        listeningIndicator.classList.remove('active');
        listeningStatus.textContent = '麦克风未启动';
      }
      
      // 更新权限状态
      const permissionIndicator = document.getElementById('permission-indicator');
      const permissionStatus = document.getElementById('permission-status');
      
      if (status.hasPermission === true) {
        permissionIndicator.classList.add('active');
        permissionStatus.textContent = '已获得麦克风权限';
      } else if (status.hasPermission === false) {
        permissionIndicator.classList.remove('active');
        permissionStatus.textContent = '麦克风权限被拒绝';
      } else {
        permissionIndicator.classList.remove('active');
        permissionStatus.textContent = '权限状态未知';
      }
    }
    
    // 日志函数
    function log(message) {
      const logContainer = document.getElementById('log-container');
      const logEntry = document.createElement('div');
      logEntry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
      logContainer.appendChild(logEntry);
      logContainer.scrollTop = logContainer.scrollHeight;
    }
  </script>
</body>
</html> 